<template>
  <div class="info-container">
    <p class="info-title">{{ artistInfo?.artist.name }}简介</p>
    <p class="info-content">{{ artistInfo?.artist.briefDesc }}</p>
  </div>
</template>

<script lang="ts">
export default {
  name: "XInfo",
};
</script>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { getArtistInfoApi } from "@/api/artist/artist";

const route = useRoute();
const id = ref<any>(route.query.id);

const artistInfo = ref();

const getArtistInfo = async (id: number) => {
  const res = await getArtistInfoApi(id);
  artistInfo.value = res.data;
};

onMounted(() => {
  getArtistInfo(id.value);
});
</script>

<style scoped>
.info-container {
  margin-top: 15px;
  width: 640px;
}
.info-title {
  font-size: 26px;
  font-weight: 500;
}
</style>
